<template>
	<van-nav-bar title="人工服务" left-text="" left-arrow @click-left="goBack">
	</van-nav-bar>
	<div class="chat">
		<div class="title">人工智能服务</div>
		<ul class="text" id="ui_msg_box" ref="textRef">
			<li class="t1">
				<img src="/assets/images/head1.jpg" />
				<div class="txt">
					您好！我是菲菲，非常欢迎您的到来，有什么想和我聊聊的吗？
				</div>
			</li>
		</ul>
		<div class="cont">
			<input
				type="text"
				placeholder="在这里输入文字"
				class="inp"
				id="ui_inp_msg"
				v-model="msg"
			/>
			<a href="javascript:" class="send" @click="sendmsg">发送</a>
		</div>
	</div>
</template>

<script setup>
	const msg = ref("");
    const textRef = ref(null);

	const sendmsg = async () => {
        const newElement = document.createElement('li');
      newElement.innerHTML = `<img src="/assets/images/head2.jpg"><div class="txt">${msg.value}</div>`;
      newElement.classList.add('t2');
        textRef.value.appendChild(newElement) 
       
		let result = await Api.product.qingyunke({
			msg: msg.value,
		});
		msg.value = "";
       if(result.code==1){
        textRef.value.innerHTML+= ` <li class="t1"> <img src="/assets/images/head1.jpg"><div class="txt">${result.data}</div> </li>`
       }
		
	};
	const goBack = () => {
		history.back();
	};
</script>

<style >
	@import url("/assets/css/qingyunke.css");
</style>